小弟我之前一直是使用 Bootstrap 做為前端 CSS 框架，由於最近聽到很多 Tailwind CSS 的花式吹捧，讓我也開始感興趣了，今天就一起來研究一下吧！

架構與特色

官網一開始就有說到，Tailwind CSS 是一個 utility-first 的框架，並且使用 PostCSS 做開發，而特色如下

• 不須大量編寫 CSS，大部分僅需套用共用 class
• 相較 inline style 還提供 hover、focus 等等偽類 class
• 可透過語法組合 class 達到模組化
• 可自定義斷點、變數、偽類等等，方便客製化
• 可自定義插件或是載入他人寫好的插件
• 提供 tree-shake 將沒用到的 CSS 移除

utility-first

utility-first 即是說以共用 CSS 為主，像是 Bootstrap 中的 text-center、mx-4 等等

PostCSS

PostCSS 是使用 JavaScript 轉換 CSS 的工具，歸類為後處理器，與預處理器的 SASS 為兩種不同的東西，預處理器將撰寫好的 Code 編譯成 CSS，而後處理器則是把 Code 依照設定與插件做加工，實際上 Tailwind 的運行方式就是將 CSS 經過 PostCSS 內的 Tailwind 插件做加工，進而產出需要的檔案

VSCode 插件

用 VSCode 寫 Tailwind 時有很好的插件輔助，會依照 tailwind.config.js 提示可使用的 class

Tailwind 有許多 css 不認識的語法，所以撰寫上可能會有很多錯誤提示，可以在 settings.json 加入以下設定，想了解更多設定可以看這裡

// settings.json

{
  "css.validate": false
}

安裝與編譯

1. 安裝 tailwindcss、postcss 與 autoprefixer

$ npm install tailwindcss postcss autoprefixer

2. 使用指令建立一個 tailwind.config.js

$ npx tailwindcss init

3. 建立一個 css 檔案，並加入 Tailwind 基本程式碼

/* style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 將 style.css 編譯為 tailwind.css

$ npx tailwindcss build ./style.css -o ./tailwind.css

這邊的 tailwind.css 就是完整的 CSS 檔囉！

使用之前

在看語法之前我們先看一下 Tailwind 的 CSS Reset，它採用的是 normalize 的版本，但在此之上又加了許多設定，以下有幾個比較重要的

• 區塊元素的 margin 為 0
• h1 ~ h6 的字體大小與粗細同一般文字
• 有序清單與無序清單設定為無樣式
• svg 與 img 等等圖像為 display: block
• border 顏色預設 #e5e7eb，寬度為 0

當然還有其他的設定，詳細可以看官網，如果不想要這些設定則可以將 preflight 改為 false

// tailwind.config.js

module.exports = {
  corePlugins: {
   preflight: false
  }
}

語法介紹

Tailwind 內有許多自己的語法，包含我們一開始看到的 @tailwind，還有其他像是 @apply 或 @layer 等等，以下會一一介紹，詳細也可以直接看官網

@tailwind

用來載入官方提供的樣式

• 編譯順序由上而下，改變載入位置同時也會改變順序
• @tailwind screens 可省略，預設會載入在最後方

@tailwind base; /* 基礎樣式 */
@tailwind components; /* 模組樣式 */
@tailwind utilities; /* 共用樣式 */
@tailwind screens; /* 響應式樣式 */

@apply

用來將多個樣式合併，Tailwind 的模組化就是靠此功能實現

• @apply 可與一般 CSS 一起使用
• @apply 後方樣式編譯時不照順序排列，如要排列可使用多個 @apply
• 可直接 @apply 組好的 class 但 !important 不會繼承
• 如需繼承 !important 可直接寫在 @apply 最後方

/* Input */
.btn {
  background-color: #3b82f6 !important;
  @apply py-2 px-4;
  @apply font-bold rounded;
}
.btn-blue {
  @apply btn;
  /* @apply btn !important; 可將所有 class 加上 !important */
}

/* Output */
.btn {
  background-color: #3b82f6 !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
  font-weight: 700;
}
.btn-blue {
  background-color: #3b82f6;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
  font-weight: 700;
}

@layer

此功能會依照對應的圖層將 CSS 插入該處

• 可使用的圖層有 base、components 與 utilities
• 插入位置為該圖層最後方
• 如果要插入的圖層沒有載入，則 class 會直接放在原處

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
}
@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded;
  }
}
@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

@variants

可將 class 加上各種的效果，例如 focus、hover 等等

• @variants 後方的順序影響 CSS 排列順序
• tailwind.config.js 中可使用的 variant 這邊亦可使用

/* Input */
@variants focus, hover {
  .ares {
    color: #3b82f6;
  }
}

/* Output */
.ares {
  color: #3b82f6;
}
.focus\:ares:focus {
  color: #3b82f6;
}
.hover\:ares:hover {
  color: #3b82f6;
}

@responsive

能產出響應式的 class

• 使用 @variants responsive { ... } 同樣也能做到該功能

/* Input */
@responsive {
  .ares {
    color: #3b82f6;
  }
}

/* Output */
@media (min-width: 640px) {
  .sm\:ares {
    color: #3b82f6;
  }
}
@media  (min-width: 768px) {
  .md\:ares {
    color: #3b82f6;
  }
}
@media (min-width: 1024px) {
  .lg\:ares {
    color: #3b82f6;
  }
}
@media (min-width: 1280px) {
  .xl\:ares {
    color: #3b82f6;
  }
}

@screen

可將響應式的斷點以 tailwind.config.js 內定義的字串替代

/* Input */
@screen lg {
  .ares {
    color: #3b82f6;
  }
}

/* Output */
@media (min-width: 1024px) {
  .ares {
    color: #3b82f6;
  }
}

theme()

提供我們去查找 tailwind.config.js 內的參數

• theme() 內需傳入字串，且同 JavaScript 使用 . 或 [] 查找

/* Input */
.ares {
  color: theme('colors.blue.500');
}

/* Output */
.ares {
  color: #3b82f6;
}

結語

之前在寫 Bootstrap 的時候一值很喜歡用 utility class，實際讀過 Tailwind 之後發現這才是把 utility 發揮到極致阿！雖然沒有許多現成的 Component 可以用，不過這對於什麼都想自幹的人應該再適合不過了吧，接著下篇會來介紹它設定的部分～那就這樣啦～